<template>
  <!-- <a :href="url">
    <slot>
    </slot>
  </a> -->
  <nuxt-link :to="url"
    no-prefetch
    :prefetch="false">
    <slot>
    </slot>
  </nuxt-link>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CommonLink',
  props: {
    path: {
      type: String,
      default: '/',
    },
    query: {
      type: Object,
      default: function () {
        return {}
      },
    },
    params: {
      type: Object,
      default: function () {
        return {}
      },
    },
    isLang: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
    url() {
      let path = this.path
      if (this.locale !== 'en' && !this.isLang) {
        path = `/${this.locale}${path}`
      }
      if (JSON.stringify(this.params) !== '{}') {
        for (let item in this.params) {
          if (item !== 'lang') {
            path = path.replace(`:${item}`, this.params[item])
          }
        }
      }
      if (JSON.stringify(this.query) !== '{}') {
        let qSrc = ''
        for (let item in this.query) {
          qSrc = `${qSrc}${qSrc === '' ? '?' : '&'}${item}=${this.query[item]}`
        }
        path = `${path}${qSrc}`
      }

      return path
    },
  },
}
</script>